<template>
  <view>
    <!-- 文件上传, PC端   -->
    <view class="upload-progress-container-pc" >
      <!--      uview-ui的upload 通用性不高-->
      <view class="upload-progress-container-pc-item" @click="segUploadClick">
        <u-icon name="plus" size="28" class="upload-progress-container-pc-icon"></u-icon>
        <!--  请等待  -->
        <u--text type="info" :text="getTranslate(0)" align="center" size="12" class="upload-progress-container-pc-text" v-if="!uploadDone"></u--text>
        <u--text type="info" :text="getTranslate(1)" align="center" size="12" class="upload-progress-container-pc-text" v-else></u--text>
      </view>
      <progress :percent="getPercentage()" activeColor="#10AEFF" stroke-width="3" show-info @click="showPopup"/>
    </view>

    <!--  u-popup 用于展示具体的上传信息, 点击进度条查看，屏幕判定为移动时使用 -->
    <u-popup
        :show="show" @close="closePopup"
        mode="center" :overlayOpacity="0.1"
        :closeable="true">
      <seg-upload-detail :pop-up-info="popUpInfo" :table-data="getTableData()" @reUpload="reUpload"></seg-upload-detail>
    </u-popup>

  </view>
</template>

<script>
import segTable from '../seg-table/seg-table'
import segUploadDetail from '../seg-upload-detail/seg-upload-detail'
import appConfig from "../../api/appConfig";
import flaskApi from "../../api/flaskApi";
import {mapState, mapActions} from 'vuex'
import UniPopup from "../uni-popup/uni-popup";
import SegContentGroup from "../seg-content-group/seg-content-group";
import calCommon from "../../utils/winCal/calCommon";
import store from "../../utils/store";
import upload from "../../utils/file/upload";
import statusJudge from "../../utils/monitor/statusJudge";
import language from "../../api/language";

export default {
  name: "segUpload",
  components: {SegContentGroup, UniPopup, segTable, segUploadDetail},
  mixins: [calCommon, upload, statusJudge],
  mounted() {
    if(appConfig.system.DEBUGGER){
      this.debuggerAnimation()
    }
    this.tableCal()
    // this.changeRightBarStatus(this.show)
  },
  watch: {
    // show(newVal, oldVal){
    //   this.changeRightBarStatus(newVal)
    // },
  },
  data(){
    return {
      ...flaskApi,
      calMode: appConfig.calMode,
      fileList: [],
      uploadDone: false,  // true显示上传成功
      show: false,  // 弹出框
      tableData: {
        head: [
          {name: '图片名称'},
          {name: '图片状态'},
          {name: '上传进度'}
        ],
        line: [
          [
            {name: '2020-10-20'},
            {name: 'jetson'},
            {name: 'success'}
          ],
          [
            {name: '20'},
            {name: 'tson'},
            {name: 'success'}
          ],
        ]
      }
    }
  },
  methods: {
    getTranslate(posIndex){
      let langDict = language.getTranslate(language.segUpload)
      if (posIndex === 0){
        return langDict.wait
      }else if(posIndex === 1){
        return langDict.uploadPicture
      }else if(posIndex === 2){
        return langDict.pictureName
      }else if(posIndex === 3){
        return langDict.pictureStatus
      }else if(posIndex === 4){
        return langDict.uploadProgress
      }else if(posIndex === 5){
        return langDict.reUpload
      }
    },
    reUpload(errorMonitor){
      this.segReUpload(errorMonitor)
      this.getTableData()
    },
    getPercentage(){
      if (this.segUploadTotal.total === 0){
        this.uploadDone = true
        return 0
      }else{
        let value = (this.segUploadTotal.success + this.segUploadTotal.fail) / this.segUploadTotal.total * 100
        this.uploadDone = value === 100;
        return value.toFixed(1)
      }
    },
    getTableData(){
      let tableData = {
        head: [
          {name: this.getTranslate(2)},
          {name: this.getTranslate(3)},
          {name: this.getTranslate(4)}
        ],
        line: [],
        errorMonitor: []
      }
      if (this.segUploadTotal.total === 0){
        return tableData
      }else{
        // let monitorList = this.segUploadErrorList.concat(this.segUploadStatusList)
        // for (let i = 0; i < monitorList.length; i++){
        for(let key in this.segUploadStatusDict){
          // let monitor = monitorList[i]
          let monitor = this.segUploadStatusDict[key]
          if(monitor.status === 'error'){
            tableData.errorMonitor.unshift(monitor)
            tableData.line.unshift([
              {name: monitor.name},
              {name: monitor.status},
              {name: monitor.errorMsg}
            ])
          }else {
            tableData.line.push([
              {name: monitor.name},
              {name: monitor.status},
              {name: monitor.progress}
            ])
          }
        }
        return tableData
      }
    },
    closePopup() {
      this.show = false
    },
    showPopup() {
      this.show = true
    },
    changeRightBarStatus(newVal){
      // 右侧栏在手机范围内才显示，其他都是false
      if(this.judge(appConfig.deviceType.desktop)) newVal = true

      let segPanelStatus = {
        showRightPanel: (!newVal)
      }
      store.dispatch('app/setSegPanelState', segPanelStatus)
    },
    debuggerAnimation(){
      let that = this
      setInterval(()=>{
        if(that.uploadDone === true){
          that.uploadDone = false
        }
        that.percentage += 10
        if (that.percentage === 100){
          that.percentage = 0
          that.uploadDone = true
        }
      }, 1000)
    }
  }

}
</script>

<style scoped>
  /* 样式重载 */
  /deep/ .u-upload__wrap{
    display: block;
  }


  .upload-progress-container-pc{
    /*text-align: center;*/
  }
  .upload-progress-container-pc-item{
    border: 1px #ebeef5 solid;
    cursor: pointer;
  }
  .upload-progress-container-pc-icon{
    justify-content: center;
    margin: 8% 0;
  }
  .upload-progress-container-pc-text{
    padding-bottom: 5%;
  }
  .upload-progress-container {
    display: flex;
    width: 220px;
    align-items: center;
    margin: 0 3%;
  }
  .upload-progress-item-button{
    width: 85px;
  }
  .upload-progress-item {
    padding-left: 3%;
    width: 135px;
  }
  .upload-progress-info {
  }
  .upload-mobile-info {
    width: 220px;
  }


</style>
